<template>
	<view>
		<my-navbar title="班级详情" :border="true"></my-navbar>
		<view class="app-background"></view>
		<!-- 浮动头部 START -->
		<view class="app-fixed">
			<view class="squadDetail-header">
				<view class="header-item">
					<view class="flex1 big">
						<text v-if="squadDetail.detail">{{ squadDetail.detail.gradeName }}{{ squadDetail.detail.squadName }}班</text>
						<text v-else>--</text>
					</view>
					<view v-if="squadDetail.detail" class="item-right" @click="clickButton('member')">查看成员</view>
				</view>
				<view class="header-item">
					<image class="item-left" src="/static/my/icon_school.png"></image>
					<view class="flex1">
						<text v-if="squadDetail.detail">{{ squadDetail.detail.schoolName }}</text>
						<text v-else>--</text>
					</view>
				</view>
				<view class="header-item">
					<image v-if="squadDetail.detail && squadDetail.detail.classTeacherPhoto" class="item-left" :src="squadDetail.detail.classTeacherPhoto"></image>
					<image v-else class="item-left" src="/static/my/icon_people.png"></image>
					<view class="flex1">
						<text>班主任：</text>
						<text v-if="squadDetail.detail">{{ squadDetail.detail.classTeacherName || '无' }}</text>
						<text v-else>--</text>
					</view>
				</view>
				<view class="header-item">
					<image class="item-left" src="/static/my/icon_school.png"></image>
					<view class="flex1">放学时间：{{ hometimeText }}</view>
					<view v-if="hometimeData.data" class="item-right" @click="clickButton('hometime')">
						<text v-if="hometimeText === '未设置'">设置时间</text>
						<text v-else>修改时间</text>
					</view>
				</view>
				<view class="header-stats">
					<view class="stats-item">
						<text v-if="squadDetail.detail" class="big">{{ squadDetail.detail.teacherNumber }}</text>
						<text v-else class="big">--</text>
						<text>老师</text>
					</view>
					<view class="stats-item">
						<text v-if="squadDetail.detail" class="big">{{ squadDetail.detail.studentNumber }}</text>
						<text v-else class="big">--</text>
						<text>学生</text>
					</view>
					<view class="stats-item none-border">
						<text v-if="squadDetail.detail" class="big">{{ squadDetail.detail.familyNumber }}</text>
						<text v-else class="big">--</text>
						<text>家长</text>
					</view>
				</view>
			</view>
		</view>
		<view class="app-offset"><view class="squadDetail-header"></view></view>
		<!-- 浮动头部 END -->
		<!-- 通知列表 START -->
		<view class="squadDetail-notice">
			<template v-if="noticeList.code">
				<template v-if="noticeList.list.length">
					<NoticeList :list="noticeList.list" :count="noticeList.count" @handle="noticeList.handle"></NoticeList>
				</template>
				<template v-else>
					<view class="notice-none">
						<image class="none-image" src="/static/index/image_bell.png"></image>
						<view class="none-text">还没有老师发布通知</view>
					</view>
				</template>
			</template>
		</view>
		<!-- 通知列表 END -->
		<!-- 浮动底部 START -->
		<view class="app-offset">
			<view class="squadDetail-bottombar"></view>
			<safe-area></safe-area>
		</view>
		<view class="app-fixed-bottom">
			<view class="squadDetail-bottombar">
				<view class="bottombar-button app-button" hover-class="hover" @click="clickButton('exit')">退出班级</view>
				<view class="bottombar-button primary app-button" hover-class="hover" @click="clickButton('change')">修改班级</view>
			</view>
			<safe-area color="#ffffff"></safe-area>
		</view>
		<!-- 浮动底部 END -->
		<!-- 弹窗 START -->
		<template>
			<my-popup :custom="1" :show="p_exit.show" @handle="p_exit.handle">
				<view class="popup1">
					<view class="popup1-content">确定退出该班级？</view>
					<view class="popup1-buttons">
						<view class="button-item app-button" hover-class="hover" @click="p_exit.clickButton(0)">取消</view>
						<view class="button-item primary app-button" hover-class="hover" @click="p_exit.clickButton(1)">确定</view>
					</view>
				</view>
			</my-popup>
		</template>
		<!-- 弹窗 END -->
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import NoticeList from '@/components/notice-list/notice-list';
import util from '@/common/util';
import sign from '@/common/sign.js'
export default {
	data() {
		return {
			id: '',
			squad: '',
			squadItem: {
				item: {},
				getItem: () => {
					return new Promise(async (reslove, reject) => {
						const context = this.squadItem;
						const page = {};
						const data = {
							squad: this.squad
						};
						uni.showLoading({
							mask: true
						});
						let res1;
						try {
							res1 = await this.$api.common.get_squad_message_list({ page, data });
						} catch (err) {
							uni.hideLoading();
							this.$showToast(err.message || '获取班级数据失败');
							reject();
							return;
						}
						context.item = res1.result.data[0] || {};
						uni.hideLoading();
						reslove();
					});
				}
			},
			squadDetail: {
				detail: null,
				getDetail: async () => {
					const context = this.squadDetail;
					uni.showLoading({
						mask: true
					});
					let res1;
					try {
						res1 = await this.$api.common.get_squad_detail(this.squadItem.item.id);
					} catch (err) {
						uni.hideLoading();
						this.$showToast(err.message || '获取班级数据失败');
						return;
					}
					context.detail = res1.result || {};
					uni.hideLoading();
				}
			},
			hometimeData: {
				data: null,
				getData: async () => {
					const context = this.hometimeData;
					const page = {};
					const data = {
						squad: this.squad
					};
					uni.showLoading({
						mask: true
					});
					let res1;
					try {
						res1 = await this.$api.hometime.get_list({ page, data });
					} catch (err) {
						uni.hideLoading();
						this.$showToast(err.message || '获取放学时间数据失败');
						return;
					}
					context.data = res1.result.data[0] || {};
					uni.hideLoading();
				}
			},
			noticeList: {
				pageNo: 1,
				pageSize: 10,
				pageCount: 0,
				count: 0,
				code: 0,
				list: [],
				getList: async ifRefresh => {
					const context = this.noticeList;
					if (ifRefresh) {
						context.pageNo = 1;
						context.pageCount = 0;
						context.count = 0;
					}
					if (context.pageCount !== 0 && context.pageNo >= context.pageCount + 1) {
						this.$showToast('已加载全部通知列表数据');
						return;
					}
					const page = {
						pageSize: context.pageSize,
						pageNo: context.pageNo
					};
					const data = {
						squad: this.squad
					};
					uni.showLoading({
						mask: true
					});
					let res1;
					try {
						res1 = await this.$api.notice.get_list({ page, data });
					} catch (err) {
						uni.hideLoading();
						this.$showToast(err.message || '获取通知列表数据失败');
						context.code = err.code;
						return;
					}
					context.code = res1.code;
					context.pageCount = res1.result.pageCount;
					context.count = res1.result.count;
					const platform = uni.getSystemInfoSync().platform;
					if (platform === 'ios') {
						res1.result.data.sort((a, b) => {
							const timeA =  new Date(a.cretime.replace(/-/g, '/')).getTime();
							const timeB = new Date(b.cretime.replace(/-/g, '/')).getTime();
							return timeB - timeA;
						});
						for (const i of res1.result.data) {
							i.friendlyTime = util.getFriendlyTime1(new Date(i.cretime.replace(/-/g, '/')));
						}
					} else {
						res1.result.data.sort((a, b) => {
							const timeA =  new Date(a.cretime).getTime();
							const timeB = new Date(b.cretime).getTime();
							return timeB - timeA;
						});
						for (const i of res1.result.data) {
							i.friendlyTime = util.getFriendlyTime1(new Date(i.cretime));
						}
					}
					if (ifRefresh) context.list = [];
					context.list.push(...res1.result.data);
					uni.hideLoading();
				},
				handle: (fn, e, payload) => {
					if (fn === 'clickCard') this.noticeList.handleClickCard(payload.item);
				},
				handleClickCard: item => {
					uni.navigateTo({
						url: '/packageA/pages/notice/noticeDetail' + `?id=${item.id}&squad=${this.squad}`
					});
				}
			},
			p_exit: {
				show: false,
				handle: fn => {
					if (fn === 'clickMask') this.p_exit.show = false;
				},
				clickButton: async id => {
					this.p_exit.show = false;
					if (id == 0) return;
					uni.showLoading({
						mask: true
					});
					let res1;
					try {
						res1 = await this.$api.user.exit_squad({
							id: this.squadItem.item.id
						});
					} catch (err) {
						uni.hideLoading();
						this.$showToast(err.message || '操作失败');
						return;
					}
					uni.hideLoading();
					this.$showToast('操作成功');
					try {
						this.updateJxyUserInfo();
					} catch (err) {}
					uni.navigateBack();
				}
			}
		};
	},
	computed: {
		hometimeText() {
			if (!this.hometimeData.data) return '--';
			if (!this.hometimeData.data.id) return '未设置';
			const day = new Date().getDay();
			const leaveMap = {
				0: 'sunLeave',
				1: 'monLeave',
				2: 'tuesLeave',
				3: 'wedLeave',
				4: 'thurLeave',
				5: 'friLeave',
				6: 'satLeave'
			};
			const dayHometime = this.hometimeData.data[leaveMap[day]];
			if (!dayHometime) return '未设置';
			const dayName = util.getDayName2(day);
			return `今天（${dayName}）${dayHometime}`;
		}
	},
	methods: {
		...mapActions(['updateJxyUserInfo']),
		clickButton(id) {
			switch (id) {
				case 'member':
					uni.navigateTo({
						url: '/packageA/pages/my/memberList' + `?squad=${this.squad}`
					});
					return;
				case 'hometime':
					uni.navigateTo({
						url: '/packageA/pages/my/hometimeDetail' + `?squad=${this.squad}`
					});
					return;
				case 'exit':
					this.p_exit.show = true;
					return;
				case 'change':
					uni.navigateTo({
						url: '/packageA/pages/my/changeSquad' + `?squad=${this.squad}`
					});
					return;
			}
		}
	},
	async onLoad(options) {
		this.squad = options.squad;
		wx.setStorageSync('currentSquadId', this.squad);
		try {
			await this.noticeList.getList(true);
		} catch (err) {}
	},
	onUnload() {
		wx.clearStorageSync('currentSquadId');
	},
	async onShow() {
		const squad = wx.getStorageSync('currentSquadId');
		const isChanged = squad !=='' && this.squad !== squad;
		if (isChanged) {
			this.squad = squad;
			wx.setStorageSync('currentSquadId', this.squad);
		}
		try {
			await this.squadItem.getItem();
			await this.squadDetail.getDetail();
		} catch (err) {}
		try {
			await this.hometimeData.getData();
		} catch (err) {}
		// 如果班级改变了通知列表也需要重新获取
		if(sign.UPDATE_NOTICE_LIST) {
			sign.UPDATE_NOTICE_LIST = false;
			uni.pageScrollTo({
				scrollTop: 0
			});
			try {
				await this.noticeList.getList(true);
			} catch (err) {}
		} else if (isChanged) {
			uni.pageScrollTo({
				scrollTop: 0
			});
			try {
				await this.noticeList.getList(true);
			} catch (err) {}
		}
	},
	async onPullDownRefresh() {
		try {
			await this.squadItem.getItem();
			await this.squadDetail.getDetail();
		} catch (err) {}
		try {
			await this.hometimeData.getData();
		} catch (err) {}
		try {
			await this.noticeList.getList(true);
		} catch (err) {}
		uni.stopPullDownRefresh();
	},
	async onReachBottom() {
		this.noticeList.pageNo++;
		try {
			await this.noticeList.getList();
		} catch (err) {}
	},
	components: {
		NoticeList
	}
};
</script>

<style lang="less" scoped>
.squadDetail-header {
	width: 750rpx;
	height: 440rpx;
	background-color: #ffffff;
	padding: 40rpx 30rpx;
	box-sizing: border-box;

	.header-item {
		margin-bottom: 20rpx;

		font-size: 28rpx;
		color: #222222;

		display: flex;
		align-items: center;
		justify-content: space-between;

		.flex1 {
			flex: 1;
		}

		.big {
			font-size: 32rpx;
			font-weight: 700;
		}

		.item-left {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.item-right {
			color: #666666;

			display: flex;
			align-items: center;

			transition: all 0.3s;

			&:active {
				opacity: 0.5;
			}

			&::after {
				content: '';
				width: 14rpx;
				height: 24rpx;
				background-image: url(/static/my/icon_right.png);
				background-size: 100% 100%;
				margin-left: 10rpx;
			}
		}
	}

	.header-stats {
		margin-top: 40rpx;

		display: flex;
		align-items: center;

		.stats-item {
			flex: 1;
			height: 40rpx;
			border-right: 2rpx solid #e3e4e6;

			font-size: 28rpx;
			color: #666666;

			display: flex;
			align-items: center;
			justify-content: center;

			.big {
				margin-right: 10rpx;
				margin-bottom: 15rpx;

				font-size: 48rpx;
				font-weight: 500;
				color: #222222;
			}

			&.none-border {
				border-right: none;
			}
		}
	}
}

.squadDetail-notice {
	padding: 0 30rpx;
	
	.notice-none {
		display: flex;
		flex-direction: column;
		align-items: center;
	
		position: absolute;
		left: 50%;
		top: 58%;
		transform: translate(-50%, -50%);
		.none-image {
			width: 334rpx;
			height: 255rpx;
			margin-top: 100rpx;
		}
		.none-text {
			font-size: 28rpx;
			color: #707070;
			margin-top: 70rpx;
		}
		
	}
}

.squadDetail-bottombar {
	width: 750rpx;
	height: 112rpx;
	background-color: #ffffff;
	border-top: 2rpx solid #e3e4e6;
	padding: 0 25rpx;
	box-sizing: border-box;

	display: flex;
	align-items: center;
	justify-content: space-around;

	.bottombar-button {
		width: 304rpx;
		height: 80rpx;
		border-radius: 44rpx;
		border: 2rpx solid #e3e4e6;
		background-color: #ffffff;

		font-size: 33rpx;
		color: #222222;

		display: flex;
		align-items: center;
		justify-content: center;

		&.primary {
			border: none;
			background: linear-gradient(90deg, #fdb020, #ff6600);
			color: #ffffff;
		}
	}
}

.popup1 {
	width: 594rpx;
	border-radius: 30rpx;
	background-color: #ffffff;
	overflow: hidden;

	color: #222222;

	.popup1-content {
		line-height: 60rpx;
		padding: 40rpx 30rpx;

		font-size: 32rpx;
		text-align: center;
	}

	.popup1-buttons {
		height: 90rpx;
		border-top: 2rpx solid #e3e4e699;

		display: flex;

		.button-item {
			flex: 1;
			border-right: 2rpx solid #e3e4e699;

			position: relative;

			font-size: 32rpx;
			font-weight: 500;
			color: #222222;

			display: flex;
			align-items: center;
			justify-content: center;

			&:last-child {
				border-right: none;
			}

			&.primary {
				color: #ff6600;
			}
		}
	}
}
</style>
